<template>
  <div>
      <el-row>
          <el-col id="KeyCarInfo" :span="10">
               <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
                   <tr v-for="(v,k,i) in form" :key="v">
                       <template v-if="k!=='netGridID'&&k!=='vechiclesTypeValue'&&k!=='netGridName'&&k!=='vechiclesTypeName'" >
                          <td class="tb_label">
                            {{labels[i]}}
                          </td>
                          <td  >
                              {{v}}
                          </td>
                       </template>
                       <template  v-if="k=='netGridName'" >
                          <td class="tb_label">所属网格</td>
                          <td>{{v}}</td>
                       </template>
                       <template v-if="k=='vechiclesTypeName'">
                          <td class="tb_label">车辆类型</td>
                          <td>{{v}}</td>
                       </template>
                   </tr>
                    <tr>
                      <td colspan="2" align="center">
                        <el-button type="text" size="large" @click="printTable('KeyCarInfo')">[打印]</el-button>
                        <el-button type="text" size="large" @click="goBack()">[返回]</el-button>
                      </td>
                  </tr>
               </table>
          </el-col>
      </el-row>
  </div>
</template>

<script>
import * as api from "@/api/trafficManage";
export default {
  data() {
    return {
      form: {
        keyVehiclesID: 1,
        vehiclesHolderCertID: "123123123",
        vehiclesHolderName: "aaa",
        vechiclesNumber: "123",
        vechiclesTypeValue: "H11",
        insuranceInf: null,
        enterpriseUSCcode: null,
        yearCheckInf: null,
        netGridID: 1,
        contact: "12312",
        remarks: null,
        vechiclesTypeName: "重型普通货车",
        netGridName: "玉晨村"
      },
      labels: ["编号", "身份证号", "车主姓名", "车牌号码", "车辆类型", '保险情况','统一社会信用代码','年检情况',"所属网格", "联系方式",'备注']
    };
  },
  methods: {
    printTable(div) {
      var div_print = document.getElementById(div);
      var newStr = div_print.innerHTML;
      var oldStr = document.body.innerHTML;
      document.body.innerHTML = newStr;
      window.print();
      window.location.reload();
      window.body.innerHTML = oldStr;
      return false;
    },
    goBack() {
      this.$router.go(-1);
    }
  },
  mounted() {
    let id = this.$route.query.id;
    api.fetchDetailByID(id).then(res => {
      this.form = res.data;
    });
  }
};
</script>

<style scoped>
.userInfoEditTable,
.userInfoEditTable td {
  border: 1px solid darkgrey;
  padding: 10px;
}

.tb_label {
  width: 18%;
  text-align: right;
}
</style>
